<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			
			.cle{
				clear: both;
			}
			
			/*logo 部分的div*/
			.header{
				width: 100%;
			}
			.header div{
				float:left;
				width:33.33%;
				height: 60px;
				line-height: 50px;
			}
			.header a{
				padding: 15px;
			}
			
			/*菜单部分*/
			.menu{
				width: 100%;
				background-color: #000;
				height: 50px;
				padding-top:1px
			}
			
			.menu ul li{
				list-style-type: none;
				display: inline;
			}
			
			.menu a{
				font-size: 25px;
				color: #fff;
				
			}
			
			/*轮播图*/
			.lunbo{
				width:100%;
				margin-top:10px;
				margin-bottom: 10px;
			}
			
			.lunbo img{
				width:100%;
			}
			
			/*热门商品*/
			/*.left,.right{
				float:left;
			}*/
			.left{
				float:left;
				width: 16%;
				height: 500px;
			}
			.right{
				float: left;
				width:84%;
				text-align: center;
				height: 500px;
			}
			
			.middle{
				float:left;
				width: 50%;
				height: 250px;
			}
			.item{
				float:left;
				width:16.66%;
				height: 250px;
			}
			
			/*给广告*/
			.ad1{
				width: 100%;
			}
			.ad1 img{
				width: 100%;
			}
			
			/*版权*/
			.foot{
				width:100%;
			}
			.foot p{
				text-align: center;
			}
		</style>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script>
			$(function(){
				//开启一个定时器 2秒之后展示div
				setTimeout(showAd,2000);
			});
			
			//编写展示的方法
			function showAd(){
				//获取div,调用效果
				//$("#ad").show(1000);
				//$("#ad").slideDown(1000);
				$("#ad").fadeIn(1000);
				//开启另一个隐藏的定时器
				setTimeout("hideAd()",3000);
			}
			
			//编写隐藏方法
			function hideAd(){
				//$("#ad").hide(1000);
				//$("#ad").slideUp(1000);
				$("#ad").fadeOut(1000);
			}
		</script>
	</head>
	<body>
		<div id="ad" style="width:100%;display: none;">
			<img src="../img/ad_.jpg" width="100%" />
		</div>
		<!--
			一个大div中放置8个div
		-->
		<div>
			<!--logo
				嵌套三个div
			-->
			<div class="header">
				<div>
					<img src="../img/logo2.png" height="40px" />
				</div>
				<div>
					<img src="../img/header.jpg" />
				</div>
				<div>
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<div class="cle"></div>
			
			<!--菜单-->
			<div class="menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
				</ul>
			</div>
			
			<!--轮播图-->
			<div class="lunbo">
				<img src="../img/1.jpg"/>
			</div>
			
			<!--热门
				将起划分成两个div
					左边放图片
					右边的放商品
						
			-->
			<div class="hot">
				<!--存放热门商品和一张图片-->
				<div>
					<h2 style="display: inline;">热门商品</h2>
					<img src="../img/title2.jpg" />
				</div>
				<div>
					<!--存放左边的图片-->
					<div class="left">
						<img src="../img/big01.jpg" />
					</div>
					<!--存放商品图片-->
					<div class="right">
						<div class="middle">
							<img src="../img/middle01.jpg" />
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
					</div>
				</div>
			</div>
			
			<div class="cle"></div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/ad.jpg"/>
			</div>
			
			<!--最新-->
			<div></div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/footer.jpg"/>
			</div>
			
			<!--版权foot-->
			<div class="foot">
				<p>
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
					</p>
					<p>
						Copyright &copy; 2005-2016 传智商城 版权所有
					</p>
			</div>
			
			
		</div>
	</body>
</html>
